<template>
    <!-- 表格 -->
    <el-table :data="tableData()" height="500" style="width: 100%;">
        <el-table-column type="index" />
        <el-table-column prop="datetime" label="创建时间" />
        <el-table-column prop="id" label="订单id" width="100px" />
        <el-table-column prop="amount" label="商品数量" />
        <el-table-column prop="total" label="总价" />
        <el-table-column label="地址">
            <template #default="scope">
                <p>{{ scope.row.address }}</p>
                <p>{{ scope.row.name }} {{ scope.row.phone }}</p>
            </template>
        </el-table-column>
        <el-table-column prop="paytype" label="付款状态" />
        <el-table-column prop="status" label="送货状态" />
        <el-table-column label="操作" fixed="right">
            <template #default="scope">
                <el-button type="success" v-if="scope.row.paytype == '已支付' && scope.row.status == '待发货'"
                    @click="status(scope.row.id)">发货</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="example-pagination-block">
        <el-pagination background layout="prev, pager, next, total, sizes" :total="state.total"
            @current-change="handleCurrentChange" @size-change="handleSizeChange" />
    </div>
</template>

<script setup>
import api from '@/api/api';
import { onMounted, ref } from 'vue';
import moment from 'moment';
import { ElMessage } from 'element-plus';


var info = ref([]);

// 日期格式化
const dateFormat = (row, column) => {
    var date = row[column.property];
    if (date === undefined) {
        return ''
    }
    return moment(date).format("YYYY-MM-DD HH:mm:ss")
}

// 分页 https://blog.csdn.net/Xwf1023/article/details/126956007
const state = ref({
    page: 1,
    limit: 10,
    total: info.value.length,
});
//前端限制分页（tableData为当前展示页表格）
const tableData = () => {
    return info.value.filter(
        (item, index) =>
            index < state.value.page * state.value.limit &&
            index >= state.value.limit * (state.value.page - 1)
    );
};
//改变页码
const handleCurrentChange = (e) => {
    state.value.page = e;
};
//改变页数限制
const handleSizeChange = (e) => {
    state.value.limit = e;
};
// -----------------------

// 发货
const status = (id) => {
    api.orderStatus(id, 2);
    ElMessage({
        message: '发货成功',
        type: 'success'
    })
    init.apply();
}

// 初始化
const init = () => {
    api.showAllOrder()
        .then(ret => {
            info.value = ret.result;
            state.value.total = info.value.length;
            // 转换paytype和status
            for (let i = 0; i < info.value.length; i++) {
                let paytype = info.value[i].paytype;
                let status = info.value[i].status;
                switch (paytype) {
                    case 1: info.value[i].paytype = "未支付"; break;
                    case 2: info.value[i].paytype = "已支付"; break;
                }
                switch (status) {
                    case 1: info.value[i].status = "待发货"; break;
                    case 2: info.value[i].status = "已发货"; break;
                    case 3: info.value[i].status = "已送达"; break;
                }
            }
        })
}

onMounted(init);

</script>

<style scoped>

</style>